<SCRIPT LANGUAGE="JavaScript">  
    function validation()
    {
        var c = 0;
        var counter=document.getElementById('counter').value;
        var month1="";
        var month2="";
        var year1="";
        var year2="";
        var company="";
        var position="";                                     
        var salary="";                                     
        
        for( c = 0; c<counter; c+=1)
        {
            month1='WorkStartMonth'+c;
            month2='WorkEndMonth'+c;
            year1='WorkStartYear'+c;
            year2='WorkEndYear'+c;
            company='WorkCompany'+c;
            position='WorkPosition'+c;
            salary='WorkSalary'+c;
            
            if( document.getElementById(company).value.length!=0 )
            {
                if( document.getElementById(month1).value=="" )
                {
                    document.getElementById(month1).focus();
                    document.getElementById(month1).style.backgroundColor='#FFC';
                    alert("Please select value in the start month of period");
                    document.getElementById(month1).style.backgroundColor='#FFF';
                    return false;
                }
                if( document.getElementById(year1).value.length!=4 || isNaN(document.getElementById(year1).value) )
                {
                    document.getElementById(year1).focus();
                    document.getElementById(year1).style.backgroundColor='#FFC';
                    alert("Please fill the start year with valid year");
                    document.getElementById(year1).style.backgroundColor='#FFF';
                    return false;
                }
                if( document.getElementById(month2).value=="" )
                {
                    document.getElementById(month2).focus();
                    document.getElementById(month2).style.backgroundColor='#FFC';
                    alert("Please select value in the end month of period");
                    document.getElementById(month2).style.backgroundColor='#FFF';
                    return false;
                }
                if( document.getElementById(year2).value.length!=4 || isNaN(document.getElementById(year2).value) )
                {
                    document.getElementById(year2).focus();
                    document.getElementById(year2).style.backgroundColor='#FFC';
                    alert("Please enter the end year with valid year");
                    document.getElementById(year2).style.backgroundColor='#FFF';
                    return false;
                }
                if(document.getElementById(year1).value > document.getElementById(year2).value)
                {
                    document.getElementById(month1).focus();
                    document.getElementById(year1).style.backgroundColor='#FFC';
                    document.getElementById(month1).style.backgroundColor='#FFC';
                    alert("Start Period must be earlier than End Period");
                    document.getElementById(year1).style.backgroundColor='#FFF';
                    document.getElementById(month1).style.backgroundColor='#FFF';
                    return false;
                }                     
                if( document.getElementById(position).value=="" )
                {
                    document.getElementById(position).focus();
                    document.getElementById(position).style.backgroundColor='#FFC';
                    alert("Please fill the position of yours");
                    document.getElementById(position).style.backgroundColor='#FFF';
                    return false;
                }                 
                if( document.getElementById(salary).value.length!=0 && isNaN(document.getElementById(salary).value) )
                {
                    document.getElementById(salary).focus();
                    document.getElementById(salary).style.backgroundColor='#FFC';
                    alert("Please fill your salary with numeric charackters");
                    document.getElementById(salary).style.backgroundColor='#FFF';
                    return false;
                }         
            }
            
        }   
        
        
    
    }
    
    function test()
    {
        if( document.getElementById('counter').value >= 5 )
        { 
            alert("Sorry, not allowed more than 5");
            document.getElementById('Add').disabled=true; 
        
        }
        else
        {
            var co=parseInt(document.getElementById('counter').value)+1;
            document.getElementById('counter').value=co;
            if(co==5)
            { document.getElementById('Add').disabled=true; }
            co=co-1;
            
            var temp="<div class='kotak2'>";
            temp+="<div class='input'> <label><u>#"+(co+1)+"</u></label></div><br>";
            temp+="<div class='input'><label> Period </label>";
            temp+="<select id='WorkStartMonth"+co+"' name='data["+co+"][Work][start_month]'><option value=''></option><option value='Jan'>Jan</option><option value='Feb'>Feb</option><option value='March'>March</option><option value='April'>April</option><option value='May'>May</option><option value='June'>June</option><option value='July'>July</option><option value='Aug'>Aug</option><option value='Sept'>Sept</option><option value='Oct'>Oct</option><option value='Nov'>Nov</option><option value='Dec'>Dec</option></select>";
            temp+=" <input type='text' size=4 maxLength=4 id='WorkStartYear"+co+"' name='data["+co+"][Work][start_year]'> - ";
            temp+="<select id='WorkEndMonth"+co+"' name='data["+co+"][Work][end_month]'><option value=''></option><option value='Jan'>Jan</option><option value='Feb'>Feb</option><option value='March'>March</option><option value='April'>April</option><option value='May'>May</option><option value='June'>June</option><option value='July'>July</option><option value='Aug'>Aug</option><option value='Sept'>Sept</option><option value='Oct'>Oct</option><option value='Nov'>Nov</option><option value='Dec'>Dec</option></select>";
            temp+=" <input type='text' size=4 maxLength=4 id='WorkEndYear"+co+"' name='data["+co+"][Work][end_year]'>";
            temp+="</div>";
            temp+="<div class='input'><label> Company </label><input type='text' maxLength=40 id='WorkCompany"+co+"' name='data["+co+"][Work][company]'></div>";
            temp+="<div class='input'><label> Position </label><input type='text' maxLength=40 id='WorkPosition"+co+"' name='data["+co+"][Work][position]'></div>"; 
            temp+="<div class='input'><label> Salary </label>Rp.<input type='text' maxLength=20 id='WorkSalary"+co+"' name='data["+co+"][Work][salary]'></div>"; 
            temp+="<div class='input'><label> Duties </label><textarea id='WorkDuties"+co+"' name='data["+co+"][Work][duties]' style='width:250px;height:100px'></textarea></div>"; 
            temp+="<div class='input'><label> &nbsp </label><a href='Javascript:clean("+co+");'>[ Delete ]</a></div>"; 
            temp+="</div>";
            
            document.getElementById('list').innerHTML+=temp;
        }

    }
    
    function clean(indeks)
    {
        var temp="";
        temp="WorkEndMonth"+indeks;
        document.getElementById(temp).value="";
        temp="WorkEndYear"+indeks;
        document.getElementById(temp).value="";
        temp="WorkStartMonth"+indeks;
        document.getElementById(temp).value="";
        temp="WorkStartYear"+indeks;
        document.getElementById(temp).value="";
        temp="WorkCompany"+indeks;
        document.getElementById(temp).value="";
        temp="WorkSalary"+indeks;
        document.getElementById(temp).value="";
        temp="WorkPosition"+indeks;
        document.getElementById(temp).value="";
        temp="WorkDuties"+indeks;
        document.getElementById(temp).value="";

    }
</SCRIPT>
<?php
echo "<table class='table_resume'><tr>";
    echo "<td valign='top' width='260px'>";
    echo $this->element('menu_resume'); 
    echo "</td>";
    echo "<td class='pemisah'></td>";
    echo "<td valign='top'>";
    echo "<div class='form'>";
    echo "<h2> Working History</h2>";
    echo "<hr color='#2A7EF7'>";
        
        $months = array('Jan','Feb','March','Apr','May','June','July','Aug','Sept','Oct','Nov','Dec');
        echo $form->create('Work',array('action'=>'index','onsubmit'=>'return validation();'));
    
            $max=2;
            if(count($works)>$max)
            { $max=count($works); }
            echo "<input type='hidden' value=".$max." id='counter' name='data[counter]'>";
            
            for ($i=0;$i<$max;$i++)
            {
                    
                    if(!empty($works[$i]))
                    {
                        echo "<div class='kotak2'>";
                        echo "<div class='input'> <label><u>#".($i+1)."</u></label></div><br>";
                        echo "<div class='input'>";
                            echo "<label>Period</label>";
                            echo "<select id='WorkStartMonth".$i."' name='data[".$i."][Work][start_month]'><option value=''></option>";
                            foreach ($months as $temp)
                            {
                                if($works[$i]['Work']['start_month']==$temp)
                                { echo "<option value='".$temp."' selected='true'>".$temp."</option>"; }
                                else
                                { echo "<option value='".$temp."'>".$temp."</option>"; }
                            }                        
                            echo "</select>";
                            echo " <input type='text' size=4 maxLength=4 id='WorkStartYear".$i."' name='data[".$i."][Work][start_year]' value='".$works[$i]['Work']['start_year']."'> - ";
                            echo "<select id='WorkEndMonth".$i."' name='data[".$i."][Work][end_month]'><option value=''></option>";
                            foreach ($months as $temp)
                            {
                                if($works[$i]['Work']['end_month']==$temp)
                                { echo "<option value='".$temp."' selected='true'>".$temp."</option>"; }
                                else
                                { echo "<option value='".$temp."'>".$temp."</option>"; }
                            }
                            echo "</select>";
                            echo " <input type='text' size=4 maxLength=4 id='WorkEndYear".$i."' name='data[".$i."][Work][end_year]' value='".$works[$i]['Work']['end_year']."'>";
                        echo "</div>";
                        echo "<div class='input'><label> Company </label><input type='text' maxLength=40 id='WorkCompany".$i."' name='data[".$i."][Work][company]' value='".$works[$i]['Work']['company']."'></div>";
                        echo "<div class='input'><label> Position </label><input type='text' maxLength=40 id='WorkPosition".$i."' name='data[".$i."][Work][position]' value='".$works[$i]['Work']['position']."'></div>";
                        echo "<div class='input'><label> Salary </label>Rp. <input type='text' maxLength=20 id='WorkSalary".$i."' name='data[".$i."][Work][salary]' value='".$works[$i]['Work']['salary']."'></div>";
                        echo "<div class='input'><label> Duties </label><textarea id='WorkDuties".$i."' name='data[".$i."][Work][duties]' style='width:250px;height:100px'>".$works[$i]['Work']['duties']."</textarea></div>";
                        echo "<div class='input'><label> &nbsp </label><a href='Javascript:clean(".$i.");'>[ Delete ]</a></div>";
                        echo "</div>";
                    }
                    else
                    {
                        echo "<div class='kotak2'>";
                        echo "<div class='input'> <label><u>#".($i+1)."</u></label></div><br>";
                        echo "<div class='input'>";
                            echo "<label>Period</label>";
                            echo "<select id='WorkStartMonth".$i."' name='data[".$i."][Work][start_month]'><option value=''></option>";
                            foreach ($months as $temp)
                            {
                                echo "<option value='".$temp."'>".$temp."</option>";
                            }                        
                            echo "</select>";
                            echo " <input type='text' size=4 maxLength=4 id='WorkStartYear".$i."' name='data[".$i."][Work][start_year]'> - ";
                            echo "<select id='WorkEndMonth".$i."' name='data[".$i."][Work][end_month]'><option value=''></option>";
                            foreach ($months as $temp)
                            {
                                echo "<option value='".$temp."'>".$temp."</option>";
                            }
                            echo "</select>";
                            echo " <input type='text' size=4 maxLength=4 id='WorkEndYear".$i."' name='data[".$i."][Work][end_year]'>";
                        echo "</div>";
                        echo "<div class='input'><label> Company </label><input type='text' maxLength=40 id='WorkCompany".$i."' name='data[".$i."][Work][company]'></div>";
                        echo "<div class='input'><label> Position </label><input type='text' maxLength=40 id='WorkPosition".$i."' name='data[".$i."][Work][position]'></div>";
                        echo "<div class='input'><label> Salary </label>Rp. <input type='text' maxLength=20 id='WorkSalary".$i."' name='data[".$i."][Work][salary]'></div>";
                        echo "<div class='input'><label> Duties </label><textarea id='WorkDuties".$i."' name='data[".$i."][Work][duties]' style='width:250px;height:100px'></textarea></div>";
                        echo "<div class='input'><label> &nbsp </label><a href='Javascript:clean(".$i.");'>[ Delete ]</a></div>";
                        echo "</div>";
                    }
                
            }                        
            echo "<span id='list'></span>";
            
            
            echo "<div class='input'>";
                echo "<label><input type='button' id='Add' value='Add Record' onClick='test();'></label><input type='submit' value='Save & Next'>";
            echo "</div>";
        echo "</form>";
        echo "<br>:. <span class='info'>Please provide your working history information ( Max : 5 ) </span>";
        echo "<br>:. <span class='red'>Company, Period, Position </span> <span class='info'> are required fields</span>";
        echo "<br>:. <span class='info'>If you blank the </span><span class='red'>Company </span> <span class='info'> field, it will be ignored</span>";

    echo "</div>";
    echo "</td>";
echo "</tr></table>";
?>